body {
  perspective: 1000px;
}
.lifang {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 200px auto;
  transform-style: preserve-3d;
  transition: all 4s;
}
.lifang:hover {
  transform: rotate3d(1, 1, 1, 720deg);
}
.page {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate3d(1, 1, 1, 0deg);
  opacity: 0.6;
}
.front {
  background-image: url(../img/img1.jpg);
  background-size: 100% 100%;
  transform: translateZ(100px);
}
.back {
  background-image: url(../img/img2.png);
  background-size: 100% 100%;
  transform: translateZ(-100px);
}
.left {
  background-image: url(../img/img3.jfif);
  background-size: 100% 100%;
  transform: rotateY(-90deg) translateZ(100px);
}
.right {
  background-image: url(../img/img4.jpg);
  background-size: 100% 100%;
  transform: rotateY(90deg) translateZ(100px);
}
.top {
  background-image: url(../img/img5.jpg);
  background-size: 100% 100%;
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  background-image: url(../img/img6.jfif);
  background-size: 100% 100%;
  transform: rotateX(-90deg) translateZ(100px);
}
